菜鳥網頁基礎 DAY9

第 12 屆 iThome 鐵人賽

DAY 9

Modern Web

菜鳥網頁基礎系列第 9 篇

12th鐵人賽

小徐

團隊教練我想寫code

2020-09-24 00:56:50

807 瀏覽

分享至

<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>我的網站</title>
    <link rel="stylesheet" href="index.css" />
  </head>
 
  <body>
    <h1>圖片</h1>
    <img
      src="./images/0ws2YFTJcguqJ5hF1Hp3V8ELwZfAP_rMiLU2UYi1NlE.jpg"
      width="500"
      alt=""
    />
    <h1>圖片會變灰色圖片</h1>
    <img src="https://picsum.photos/id/431/600/400" alt="" />
  </body>
</html>

一開始圖片都是彩色的，然後字體也是原本的預設字體但是等等我會在 CSS 裡面加讓圖片變成灰色的樣式，還有改變字體。

如果 CSS 另外自己寫一個檔案的話，記得把它連結到 head 裡面

    <link rel="stylesheet" href="index.css" />

body {
    font-family: '標楷體';
}
 
img {
    filter: grayscale(80%);
}

我給了 body 標籤字體是標楷體，然後 img 給他灰階 80%，如果直接設定給 body 標楷體的話那網頁整個字體都會變成標楷體，相對的 img 也是同樣道理，img 和 body 都是標籤，如果直接設定給 img 灰階屬性的話，那所有的 img 他都會變成灰色圖片。

當你想要貓咪變回成彩色的，這時就給他們 class 或是 id。.

 <body>
    <h1>圖片</h1>
    <img
      src="./images/0ws2YFTJcguqJ5hF1Hp3V8ELwZfAP_rMiLU2UYi1NlE.jpg"
      width="500"
      alt=""
    />
    <h1>圖片會變灰色圖片</h1>
    <img class="grayscale" src="https://picsum.photos/id/431/600/400" alt="" />
  </body>

.grayscale {
    filter: grayscale(80%);
}

我在第二張圖片的程式碼加上了 class，這時候就只有那張咖啡圖變成灰色的，我只有選擇咖啡那張圖而已。

.grayscale {
    filter: grayscale(100%);
    transition: all 0.5s ease-in;
}
 
 
.grayscale:hover {
    filter: grayscale(0%);
    transform: rotateZ(20deg);
 
}

為了讓圖片有趣義典我給了圖片一些簡單會動的效果，在一開始的時候是黑白的，被滑鼠碰到後會回原本的彩色角度也會旋轉 20 度，transition 會有漸變的效果後面三個值是(屬性名稱秒數速度曲線)，屬性名稱的 all 就是所有效果都會有漸變效果。